<template>
	<div class="brand">
		<section class="brand-banner"> 
			<!-- <swiper :data="banner_data" img-key="img_path"></swiper> -->
			<img class="responsive-img img-bg" :src="data.adv_pic" alt="">
		</section>
		<section class="introduce border-b20 container">
			<div class="introduce-title layout pt10 pb10">
				<h3 class='fs16 black bold'>{{ data.brand_name }}</h3>	
				<p class="subject fs12 layout"><img class="mr5" src="../../../assets/icon13.png" style="width:1rem;" alt="">在线客服</p>
			</div>
			<p class='fs12 c666 pb15' style="line-height:150%;">
				{{ data.brand_introduction }}
			</p>
		</section>
		<nav class="nav border-b20" v-if="nav_data.length">
			<ul class='row pb20'>
				<router-link tag="li" :to="'/detail/nav-detail?id=' + item.category_id + '&brand_id=' + brand_id + '&navName='+item.category_name" class="mt20 fs14 align-center col s2 pt40" :style="{ backgroundImage:'url('+ item.category_pic +')',width:'20%'}" v-for="(item,index) in nav_data" :key="index">
		        	{{ item.category_name }} 
		        </router-link>
			</ul>
		</nav>
		<!-- 筛选 -->
		<section class="screen">
			<van-tabs swipeable>
				<van-tab  v-for="(i,index) in screen_title" :key="index">
					<div slot="title" class='ellipsis' @click="loadInitScreenData(i)">{{ i.name }}</div>
					<ul class="shop-list layout flex-w w92 auto mb25">
						<router-link tag="li" :to="'/detail?id='+item.crow_id" class="w48 mt15" v-for="(item,index) in data.list" :key="index">
							<img class="responsive-img img-bg" style="height:10rem;" :src="item.img" alt="">
							<p class='mt15 ellipsis c333 fs14'>{{ item.goods_name }}</p>
							<p class="mt5 ellipsis c666 fs12">{{ item.introduction }}</p>
							<van-progress class="mt10 mb10" color="#ff7b1a" pivot-color="#ff7b1a" :percentage="item.progress"/>
							<div class="layout">
								<p><span class="fs12 subject">￥</span><strong class="fs18 subject">{{ item.price }}</strong><span class="fs12 subject">起</span></p>
								<span class="fs12 c333">{{ item.buyer_num }}人支持</span>
							</div>
						</router-link>
					</ul>
				</van-tab>
			</van-tabs>
		</section>
	</div>
</template>

<script>
	import Swiper from '@/components/Swiper';
	import { Tab, Tabs,Progress } from 'vant';
	export default{
		components: {
			Swiper,
			Tab,
			Tabs,
			Progress
		},
		data()
		{
			return{
				sort            : 0,
				page            : 1,
				nav_data        : [],
				data 			: [],
				banner_data 	: [],
				screen_title    : [{name:'综合排序',sort:0},{name:'即将结束',sort:3},{name:'金额最多',sort:1},{name:'人数最多',sort:4}],
				brand_id        : this.$route.query.brand_id,
			}
		},
		created()
		{
			this.loadData();
			this.loadScreenData();
		},
		methods:
		{
			loadData()
			{	
				this.$http.get('/brand/category',{ params : { id : this.brand_id }}).then( res=> {
					this.nav_data = res.data;
				})
				this.$http.get('/brand/list',{ params : { type : 1 }}).then( res=> {
					this.brand_data = res.data;
				})
			},
			loadScreenData()
			{
				let params = {
					brand_id 	: this.brand_id,
					category_id : '',
					sort   		: this.sort,
					// page 		: this.page++,
					// limit 		: 10,
				}
				this.$http.get('/brand/goods',{ params : params }).then(res => {
					this.data = res.data;
				})
			},
			loadInitScreenData(item)
			{
				this.sort = item.sort;
				this.data = [];
				this.loadScreenData();
			}
		}
	}
</script>

<style lang="less">
	.brand{
		.brand-banner{
			img{
				height: 7.5rem;
			}
		}
		.nav{
			ul{
				li{
					display: block;
			        background-position: top center;
			        background-size: 41px 41px;
			        background-repeat: no-repeat;
				}
			}
		}
	}
</style>